<template>
    <ModalCom v-bind="$attrs" width="520px" @open="modalOpen" :inner-loading="innerLoading" :ok-async="okAsync">
      <Form ref="formFieldsRef" :list="state.controlList" :fields="state.fields"></Form>
    </ModalCom>
</template>

<script setup>
import { reactive, ref } from "vue"
// 跨级组件
import ModalCom from "@/components/modal/index.vue"
import Form from "@/components/form/index.vue"
// messge
import { message } from "ant-design-vue"
// 校验函数
import { validateRequired, validatePassword } from "@/utils/index"
// api
import { roleCreate } from "@/api/role"





// formFieldsRef
const formFieldsRef = ref(null)
const state = reactive({
  controlList: [
    { 
      label: "角色名称", 
      field: "role_name", 
      control: "input", 
      maxlength: 20,
      rules: [validateRequired("请输入角色名称")]
    },
    { 
      label: "角色描述", 
      field: "role_describe", 
      control: "input",
    },
  ],
  fields: {
    role_name: "",
    role_describe: ""
  }
})

const okAsync = () => {
  return new Promise((resolve, reject) => { // then，catch
    formFieldsRef.value.validataForm().then(() => {
      roleCreate(state.fields).then((res) => {
        message.success(res?.msg)
        resolve()
      }).catch(() => {
        reject()
      })
    }).catch(() => {
      reject()
    })
  })
}

const innerLoading = () => {
  return new Promise((resolve, reject) => { // then，catch
    setTimeout(() => {
      resolve()
    }, 500)
  })
}
const modalOpen = () => {
    console.log('打开了')
}
</script>